<template>
  <div class="chart-mini-progress">
    <div class="progress-name">{{ title }}</div>
    <div class="progress-num" :style="{ left: (percentage > 99 ? '95'  : percentage )+ '%', color: color }">{{ percentage }}%</div>
    <div class="target" :style="{ left: percentage + '%' }">
      <span :style="{ backgroundColor: color }" />
      <span :style="{ backgroundColor: color }" />
    </div>
    <div class="progress-wrapper">
      <div class="progress" :style="{ backgroundColor: color, width: (percentage > 100 ? 100 : percentage) + '%', height: height + 'px' }"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MiniProgress',
  props: {
    title: {
      type: String,
      default: '逾期率',
    },
    target: {
      type: Number,
      default: 0,
    },
    height: {
      type: Number,
      default: 8,
    },
    color: {
      type: String,
      default: '#ff6a6a',
    },
    percentage: {
      type: Number,
      default: 0,
    },
  }
}
</script>

<style lang="less" scoped>
.chart-mini-progress {
  padding: 5px 0;
  position: relative;
  width: 100%;
  .progress-num{font-size: 14px;top: -21px;position: absolute;margin-left: -8px;}
  .progress-name {
    left: -43px;font-size: 12px;top: 0;position: absolute;
  }
  .target {
    position: absolute;
    top: 0;
    bottom: 0;
    span {
      border-radius: 100px;
      position: absolute;
      top: 0;
      left: -1px;
      height: 4px;
      width: 2px;
      &:last-child {
        top: auto;
        bottom: 0;
      }
    }
  }
  .progress-wrapper {
    background-color: #38448e;
    position: relative;
    .progress {
      transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
      border-radius: 1px 0 0 1px;
      background-color: #ff6a6a;
      width: 0;
      height: 100%;
    }
  }
}
</style>